<template>
  <div id="app" v-if="!isExpire" :style="`width:${appWidth};height:${appHeight}`">
    <!-- <keep-alive :exclude="['bigPage', 'indexPage']" > -->
    <router-view></router-view>
    <!-- </keep-alive> -->
    <div class="my-dialog" v-if="isShowDialog">
      <div class="dialog-content">
        <div class="close-btn" @click="isShowDialog=false"></div>
        <div class="cancel-btn" @click="doLoginOut">
          <img class="btn-img" src="./assets/imgs/common/confirmBtn.png" />
        </div>
        <div class="confirm-btn" @click="isShowDialog=false">
          <img class="btn-img" src="./assets/imgs/common/cancelBtn.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
export default {
  name: 'electron-project',
  data () {
    return {
      isExpire: false,
      appHeight: '100%',
      appWidth: '100%',
      isShowDialog: false
    }
  },
  mounted () {
    let currentTime = new Date().getTime()
    let lastTime = new Date('2021/08/30 00:00:00').getTime()
    this.isExpire = currentTime > lastTime
    // 监听系统关闭
    ipcRenderer.on('master-before-close', () => {
      this.isShowDialog = true
    })
    this.initPage()
    window.addEventListener('resize', this.throttle(this.initPage, 400))
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.throttle(this.initPage, 400))
    try {
      localStorage.clear();
      this.clearAllCanvas()
    } catch (error) {
      console.log('remove-->', error)
    }
  },
  methods: {
    initPage () {
      let clientWidth = document.body.clientWidth
      let clientHeight = document.body.clientHeight
      let grantAppHeight = (9 * clientWidth) / 16
      let grantAppWidth = (16 * clientHeight) / 9
      if (grantAppHeight <= clientHeight) {
        this.appHeight = grantAppHeight + 'px'
        this.appWidth = clientWidth + 'px'
      } else {
        this.appHeight = clientHeight + 'px'
        this.appWidth = grantAppWidth + 'px'
      }
    },
    throttle (fn, wait) {
      var timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, wait)
        }
      }
    },
    doLoginOut () {
      ipcRenderer.send('master-close-app')
    }
  }

}
</script>

<style>
/* CSS */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}
#app {
  /* height: 100%; */
  margin: 0;
  padding: 0;
  position: relative;
}
.my-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.dialog-content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 70%;
  background-image: url("./assets/imgs/common/dialogBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.close-btn {
  position: absolute;
  right: 2%;
  top: 26.5%;
  width: 7%;
  height: 8.5%;
}
.cancel-btn {
  position: absolute;
  bottom: 6%;
  left: 15%;
  width: 25%;
  height: 18%;
  /* background: red;
  opacity: 0.5; */
}
.confirm-btn {
  position: absolute;
  bottom: 6%;
  right: 15%;
  width: 25%;
  height: 18%;
  /* background: red;
  opacity: 0.5; */
}
.btn-img {
  width: 100%;
  height: auto;
  display: block;
}
.btn-img:hover {
  width: 110%;
}
</style>
